<!-- build time:Tue Dec 17 2019 19:26:49 GMT+0800 (GMT+08:00) --><!doctype html><html class="theme-next mist" lang="zh-Hans"><head><meta name="generator" content="Hexo 3.8.0"><meta name="google-site-verification" content="7Tau9WyVgxnsEY9oYedu9g0U6_8akOX3wiKbaYcrg9A"><meta name="baidu-site-verification" content="EVwLiaxdxX"><link href="/css/xps13.css" rel="stylesheet" type="text/css"><link href="/css/message.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.1" rel="stylesheet" type="text/css"><meta name="keywords" content="jQuery,"><link rel="alternate" href="/atom.xml" title="MrBird" type="application/atom+xml"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=5.1.1"><meta name="description" content="页面载入ready()当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这个方法纯粹是对向window.load事件注册事件的替代方法。有一个参数对jQuery函数的引用会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺"><meta name="keywords" content="jQuery"><meta property="og:type" content="article"><meta property="og:title" content="jQuery 事件函数"><meta property="og:url" content="http://mrbird.cc/jQuery-事件函数.html"><meta property="og:site_name" content="MrBird"><meta property="og:description" content="页面载入ready()当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这个方法纯粹是对向window.load事件注册事件的替代方法。有一个参数对jQuery函数的引用会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺"><meta property="og:locale" content="zh-Hans"><meta property="og:updated_time" content="2019-10-28T12:14:46.297Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="jQuery 事件函数"><meta name="twitter:description" content="页面载入ready()当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这个方法纯粹是对向window.load事件注册事件的替代方法。有一个参数对jQuery函数的引用会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Mist",sidebar:{position:"left",display:"always",offset:12,offset_float:0,b2t:!1,scrollpercent:!1},fancybox:!1,motion:!1}</script><title>jQuery 事件函数 | MrBird</title></head><body ondragstart="return!1" class="animsition" lang="zh-Hans" style="overflow-x:hidden;padding-right:280px"><script type="text/javascript" src="/js/mo.min.js"></script><style>@media (min-width:768px) and (max-width:991px){body .header-innerr{width:700px!important}}.header-innerr{margin:0 auto;padding:100px 0 70px;width:880px}@media (min-width:1600px){.container .header-innerr{width:1200px}}.header-innerr{position:relative}.header-innerr{padding:20px 0 0}.header-innerr:after,.header-innerr:before{content:" ";display:table}.header-innerr:after{clear:both}@media (max-width:767px){.header-innerr{width:auto;padding:10px;margin-bottom:-20px}}</style><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><header id="header" class="header"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><link href="https://fonts.font.im/css?family=Merienda" rel="stylesheet"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title" style="font-family:Merienda;font-size:1.3rem">MrBird</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle"></p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section">HOME</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section">ARCHIVES</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section">TAGS</a></li><li class="menu-item menu-item-friends"><a href="/friends/" rel="section">FRIENDS</a></li><div class="sidebar-toggle" style="display:none"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div></ul><div class="site-search"><div class="popup search-popup local-search-popup"><div class="local-search-header clearfix"><span class="search-icon"><i class="fa fa-search"></i> </span><span class="popup-btn-close"><i class="fa fa-times-circle"></i></span><div class="local-search-input-wrapper"><input autocomplete="off" placeholder="Search" spellcheck="false" type="text" id="local-search-input"></div></div><div id="local-search-result"></div></div></div></nav></div><div class="header-innerr"><div class="note info" style="margin:0;letter-spacing:.15px">🐤手把手教你搭建<strong>Spring Cloud微服务权限系统</strong>（从零到部署）：<a style="color:#40dab2;font-weight:600" href="https://www.kancloud.cn/mrbird/spring-cloud" target="_blank">https://www.kancloud.cn/mrbird/spring-cloud</a></div></div></header><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://mrbird.cc/jQuery-事件函数.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="MrBird"><meta itemprop="description" content=""><meta itemprop="image" content="/images/blogImage.jpg"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="MrBird"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">jQuery 事件函数</h1><div class="post-meta"><span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">Posted on</span> <time title="创建于" itemprop="dateCreated datePublished" datetime="2016-10-11T16:43:08+08:00">2016-10-11 </time></span><span></span> <span class="post-meta-divider">|</span> <span class="page-pv"><i class="fa fa-laptop"></i>&nbsp;&nbsp;Visit count <span class="busuanzi-value" id="busuanzi_value_page_pv"></span></span></div></header><div class="post-body" itemprop="articleBody"><h2 id="页面载入"><a href="#页面载入" class="headerlink" title="页面载入"></a>页面载入</h2><h3 id="ready"><a href="#ready" class="headerlink" title="ready()"></a>ready()</h3><p>当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这个方法纯粹是对向window.load事件注册事件的替代方法。有一个参数对jQuery函数的引用会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用<code>$</code>别名。可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。</p><a id="more"></a><p>示例：</p><p>在DOM加载完成时运行的代码，可以这样写：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="comment">// 在这里写你的代码...</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>使用 <code>$(document).ready()</code> 的简写，同时内部的 jQuery 代码依然使用 <code>$</code> 作为别名，而不管全局的 <code>$</code> 是什么。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>) </span>&#123;</span><br><span class="line">  <span class="comment">// 你可以在这里继续使用$作为别名...</span></span><br><span class="line">&#125;);﻿​</span><br></pre></td></tr></table></figure><p></p><h2 id="事件处理"><a href="#事件处理" class="headerlink" title="事件处理"></a>事件处理</h2><h3 id="on-eve-sel-data-fn"><a href="#on-eve-sel-data-fn" class="headerlink" title="on(eve,[sel],[data],fn)"></a>on(eve,[sel],[data],fn)</h3><p><code>on()</code>方法在被选元素及子元素上添加一个或多个事件处理程序。</p><p>自 jQuery 版本 1.7 起，<code>on()</code> 方法是 <code>bind()</code>、<code>live()</code> 和 <code>delegate()</code> 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。</p><p>语法：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(selector).on(event,childSelector,data,<span class="function"><span class="keyword">function</span>,<span class="title">map</span>)</span></span><br></pre></td></tr></table></figure><p></p><table><tr><th>参数</th><th>描述</th></tr><tr><td><em>event</em></td><td>必需。规定要从被选元素移除的一个或多个事件或命名空间。<br>由空格分隔多个事件值。必须是有效的事件。</td></tr><tr><td><em>childSelector</em></td><td>可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。</td></tr><tr><td><em>data</em></td><td>可选。规定传递到函数的额外数据。</td></tr><tr><td><em>function</em></td><td>可选。规定当事件发生时运行的函数。</td></tr><tr><td><em>map</em></td><td>规定事件映射 ( <em>{event:function, event:function, …}) </em>，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。</td></tr></table><p>示例：</p><p>单击文本时，显示文本的内容：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).on(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert( $(<span class="keyword">this</span>).text() );</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>取消表单提交操作，并通过返回false防止事件冒泡：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"form"</span>).on(<span class="string">"submit"</span>, <span class="literal">false</span>)</span><br></pre></td></tr></table></figure><p></p><p>通过使用<code>.preventDefault()</code>取消默认操作：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"form"</span>).on(<span class="string">"submit"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">    event.preventDefault();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>使用<code>.stopPropagation()</code>停止事件冒泡，而不会阻止表单提交：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"form"</span>).on(<span class="string">"submit"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">    event.stopPropagation();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="off-eve-sel-fn"><a href="#off-eve-sel-fn" class="headerlink" title="off(eve,[sel],[fn])"></a>off(eve,[sel],[fn])</h3><p><code>off()</code> 方法通常用于移除通过 <code>on()</code> 方法添加的事件处理程序。</p><p>自 jQuery 版本 1.7 起，<code>off()</code> 方法是 <code>unbind()</code>、<code>die()</code> 和 <code>undelegate()</code> 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。</p><p>语法：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(selector).off(event,selector,<span class="function"><span class="keyword">function</span>(<span class="params">eventObj</span>),<span class="title">map</span>)</span></span><br></pre></td></tr></table></figure><p></p><table><tr><th>参数</th><th>描述</th></tr><tr><td><em>event</em></td><td>必需。规定要从被选元素移除的一个或多个事件或命名空间。<br>由空格分隔多个事件值。必须是有效的事件。</td></tr><tr><td><em>selector</em></td><td>可选。规定添加事件处理程序时最初传递给 on() 方法的选择器。</td></tr><tr><td><em>function(eventObj)</em></td><td>可选。规定当事件发生时运行的函数。</td></tr><tr><td><em>map</em></td><td>规定事件映射 ( <em>{event:function, event:function, …}) </em>，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。</td></tr></table><p>示例：</p><p>从所有段落中删除所有事件处理函数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).off()</span><br></pre></td></tr></table></figure><p></p><p>从所有段落中删除所有单击函数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).off( <span class="string">"click"</span>, <span class="string">"**"</span> )</span><br></pre></td></tr></table></figure><p></p><p>通过传递第三个参数，只删除一个先前绑定的处理函数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// code to handle some kind of event</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// ... now foo will be called when paragraphs are clicked ...</span></span><br><span class="line">$(<span class="string">"body"</span>).on(<span class="string">"click"</span>, <span class="string">"p"</span>, foo);</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"><span class="comment">// ... foo will no longer be called.</span></span><br><span class="line">$(<span class="string">"body"</span>).off(<span class="string">"click"</span>, <span class="string">"p"</span>, foo);</span><br></pre></td></tr></table></figure><p></p><p>通过其命名空间解除所有委派的事件处理函数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> validate = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="comment">// code to validate form entries</span></span><br><span class="line">&#125;;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// delegate events under the ".validator" namespace</span></span><br><span class="line">$(<span class="string">"form"</span>).on(<span class="string">"click.validator"</span>, <span class="string">"button"</span>, validate);</span><br><span class="line"> </span><br><span class="line">$(<span class="string">"form"</span>).on(<span class="string">"keypress.validator"</span>, <span class="string">"input[type='text']"</span>, validate); </span><br><span class="line"> </span><br><span class="line"><span class="comment">// remove event handlers in the ".validator" namespace</span></span><br><span class="line"> </span><br><span class="line">$(<span class="string">"form"</span>).off(<span class="string">".validator"</span>);</span><br></pre></td></tr></table></figure><p></p><h3 id="bind-type-data-fn"><a href="#bind-type-data-fn" class="headerlink" title="bind(type,[data],fn)"></a>bind(type,[data],fn)</h3><p>为每个匹配元素的特定事件绑定事件处理函数。与其相反的函数为<code>unbind()</code>。</p><p>语法：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(selector).bind(event,data,<span class="function"><span class="keyword">function</span>,<span class="title">map</span>)</span></span><br></pre></td></tr></table></figure><p></p><table><tr><th>参数</th><th>描述</th></tr><tr><td><em>event</em></td><td>必需。规定添加到元素的一个或多个事件。<br>由空格分隔多个事件值。必须是有效的事件。</td></tr><tr><td><em>data</em></td><td>可选。规定传递到函数的额外数据。</td></tr><tr><td><em>function</em></td><td>必需。规定当事件发生时运行的函数。</td></tr><tr><td><em>map</em></td><td>规定事件映射 ( <em>{event:function, event:function, …}) </em>，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。</td></tr></table><p>示例：</p><p>当每个段落被点击的时候，弹出其文本：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).bind(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert( $(<span class="keyword">this</span>).text() );</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>同时绑定多个事件类型：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'#foo'</span>).bind(<span class="string">'mouseenter mouseleave'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    $(<span class="keyword">this</span>).toggleClass(<span class="string">'entered'</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>同时绑定多个事件类型/处理程序：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button"</span>).bind(&#123;</span><br><span class="line">    click:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;$(<span class="string">"p"</span>).slideToggle();&#125;,</span><br><span class="line">    mouseover:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;$(<span class="string">"body"</span>).css(<span class="string">"background-color"</span>,<span class="string">"red"</span>);&#125;,  </span><br><span class="line">    mouseout:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;$(<span class="string">"body"</span>).css(<span class="string">"background-color"</span>,<span class="string">"#FFFFFF"</span>);&#125;  </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>你可以在事件处理之前传递一些附加的数据：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handler</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">    alert(event.data.foo);</span><br><span class="line">&#125;</span><br><span class="line">$(<span class="string">"p"</span>).bind(<span class="string">"click"</span>, &#123;<span class="attr">foo</span>: <span class="string">"bar"</span>&#125;, handler);</span><br></pre></td></tr></table></figure><p></p><p>通过返回false来取消默认的行为并阻止事件起泡：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"form"</span>).bind(<span class="string">"submit"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; <span class="keyword">return</span> <span class="literal">false</span>; &#125;)</span><br></pre></td></tr></table></figure><p></p><p>通过使用 <code>preventDefault()</code> 方法只取消默认的行为：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"form"</span>).bind(<span class="string">"submit"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    event.preventDefault();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>通过使用 <code>stopPropagation()</code> 方法只阻止一个事件起泡：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"form"</span>).bind(<span class="string">"submit"</span>, <span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    event.stopPropagation();</span><br><span class="line">&#125;);﻿​</span><br></pre></td></tr></table></figure><p></p><h3 id="one-type-data-fn"><a href="#one-type-data-fn" class="headerlink" title="one(type,[data],fn)"></a>one(type,[data],fn)</h3><p><code>one()</code> 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。当使用 <code>one()</code> 方法时，每个元素只能运行一次事件处理程序函数。</p><p>语法：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(selector).one(event,data,<span class="function"><span class="keyword">function</span>)</span></span><br></pre></td></tr></table></figure><p></p><table><tr><th>参数</th><th>描述</th></tr><tr><td><em>event</em></td><td>必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。</td></tr><tr><td><em>data</em></td><td>可选。规定传递到函数的额外数据。</td></tr><tr><td><em>function</em></td><td>必需。规定当事件发生时运行的函数。</td></tr></table><p>示例：</p><p>当所有段落被第一次点击的时候，显示所有其文本。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).one(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert( $(<span class="keyword">this</span>).text() );</span><br><span class="line">&#125;);﻿​</span><br></pre></td></tr></table></figure><p></p><h3 id="trigger-type-data"><a href="#trigger-type-data" class="headerlink" title="trigger(type,[data])"></a>trigger(type,[data])</h3><p><code>trigger()</code> 方法触发被选元素上指定的事件以及事件的默认行为（比如表单提交）。这个函数也会导致浏览器同名的默认行为的执行。比如，如果用<code>trigger()</code>触发一个’submit’，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。</p><p>示例：</p><p>页面一加载就执行button的click函数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"button"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">"123"</span>);</span><br><span class="line">    &#125;).trigger(<span class="string">"click"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>提交第一个表单，但不用submit()</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"form:first"</span>).trigger(<span class="string">"submit"</span>)</span><br></pre></td></tr></table></figure><p></p><p>给一个事件传递参数</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).click( <span class="function"><span class="keyword">function</span> (<span class="params">event, a, b</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 一个普通的点击事件时，a和b是undefined类型</span></span><br><span class="line">    <span class="comment">// 如果用下面的语句触发，那么a指向"foo",而b指向"bar"</span></span><br><span class="line">&#125; ).trigger(<span class="string">"click"</span>, [<span class="string">"foo"</span>, <span class="string">"bar"</span>]);</span><br></pre></td></tr></table></figure><p></p><p>下面的代码可以显示一个”Hello World”<br></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).bind(<span class="string">"myEvent"</span>, <span class="function"><span class="keyword">function</span> (<span class="params">event, message1, message2</span>) </span>&#123;</span><br><span class="line">    alert(message1 + <span class="string">' '</span> + message2);</span><br><span class="line">&#125;).trigger(<span class="string">"myEvent"</span>, [<span class="string">"Hello"</span>,<span class="string">"World!"</span>]);﻿​</span><br></pre></td></tr></table></figure><p></p><h3 id="triggerHandler-type-data"><a href="#triggerHandler-type-data" class="headerlink" title="triggerHandler(type, [data])"></a>triggerHandler(type, [data])</h3><p>这个方法与<code>trigger()</code>类似，但不会执行浏览器默认动作，也不会产生事件冒泡。</p><h2 id="事件委派"><a href="#事件委派" class="headerlink" title="事件委派"></a>事件委派</h2><h3 id="live-type-data-fn"><a href="#live-type-data-fn" class="headerlink" title="live(type, [data], fn)"></a><del>live(type, [data], fn)</del></h3><p>jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是的 <code>.bind()</code> 方法的一个变体。使用 <code>.bind()</code> 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 <code>.bind()</code> 才行。比如说：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"clickme"</span>&gt;</span>Click here<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>可以给这个元素绑定一个简单的click事件：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'.clickme'</span>).bind(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">"Bound handler called."</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'body'</span>).append(<span class="string">'&lt;div class="clickme"&gt;Another target&lt;/div&gt;'</span>);</span><br></pre></td></tr></table></figure><p></p><p>尽管这个新的元素也能够匹配选择器 “.clickme” ，但是由于这个元素是在调用 <code>.bind()</code> 之后添加的，所以点击这个元素不会有任何效果。</p><p><code>.live()</code> 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'.clickme'</span>).live(<span class="string">'click'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">"Live handler called."</span>); </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>然后再添加一个新元素：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">'body'</span>).append(<span class="string">'&lt;div class="clickme"&gt;Another target&lt;/div&gt;'</span>);</span><br></pre></td></tr></table></figure><p></p><p>然后再点击新增的元素，他依然能够触发事件处理函数。</p><p>从 jQuery 1.7 开始，不再建议使用 <code>.live()</code> 方法。请使用 <code>.on()</code> 来添加事件处理。</p><p>与其作用相反的函数为<code>die()</code>。</p><h3 id="delegate-sel-t-d-fn"><a href="#delegate-sel-t-d-fn" class="headerlink" title="delegate(sel,[t],[d],fn)"></a>delegate(sel,[t],[d],fn)</h3><p><code>delegate()</code> 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 <code>delegate()</code> 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。</p><p>语法：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(selector).delegate(childSelector,event,data,<span class="function"><span class="keyword">function</span>)</span></span><br></pre></td></tr></table></figure><p></p><table><tr><th>参数</th><th>描述</th></tr><tr><td><em>childSelector</em></td><td>必需。规定要添加事件处理程序的一个或多个子元素。</td></tr><tr><td><em>event</em></td><td>必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。</td></tr><tr><td><em>data</em></td><td>可选。规定传递到函数的额外数据。</td></tr><tr><td><em>function</em></td><td>必需。规定当事件发生时运行的函数。</td></tr></table><p>示例：</p><p>当点击鼠标时，隐藏或显示 p 元素：</p><p>HTML 代码:</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">    这是一个段落。</span><br><span class="line">    <span class="tag">&lt;<span class="name">button</span>&gt;</span>请点击这里<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>jQuery 代码:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"div"</span>).delegate(<span class="string">"button"</span>,<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"p"</span>).slideToggle();</span><br><span class="line">&#125;);﻿​</span><br></pre></td></tr></table></figure><p></p><p><code>delegate</code>这个方法可作为<code>live()</code>方法的替代，使得每次事件绑定到特定的DOM元素。</p><p>以下两段代码是等同的:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"table"</span>).delegate(<span class="string">"td"</span>, <span class="string">"hover"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line">    $(<span class="keyword">this</span>).toggleClass(<span class="string">"hover"</span>);</span><br><span class="line">&#125;);</span><br><span class="line">$(<span class="string">"table"</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;   </span><br><span class="line">    $(<span class="string">"td"</span>, <span class="keyword">this</span>).live(<span class="string">"hover"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;          </span><br><span class="line">        $(<span class="keyword">this</span>).toggleClass(<span class="string">"hover"</span>);    </span><br><span class="line">    &#125;);    </span><br><span class="line">&#125;);﻿​</span><br></pre></td></tr></table></figure><p></p><p>与其相反的函数是<code>undelegate()</code>。</p><h2 id="事件切换"><a href="#事件切换" class="headerlink" title="事件切换"></a>事件切换</h2><h3 id="hover-over-out"><a href="#hover-over-out" class="headerlink" title="hover([over,]out)"></a>hover([over,]out)</h3><p>当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。</p><p>示例：</p><p>鼠标悬停的表格加上特定的类：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"td"</span>).hover(</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        $(<span class="keyword">this</span>).addClass(<span class="string">"hover"</span>);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        $(<span class="keyword">this</span>).removeClass(<span class="string">"hover"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">);﻿​</span><br></pre></td></tr></table></figure><p></p><p>下面连段代码效果相同：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"td"</span>).bind(<span class="string">"mouseenter mouseleave"</span>,handlerInOut);</span><br><span class="line">$(<span class="string">"td"</span>).hover(handlerInOut);</span><br></pre></td></tr></table></figure><p></p><h3 id="toggle-s-easing-fn"><a href="#toggle-s-easing-fn" class="headerlink" title="toggle([s],[easing],[fn])"></a>toggle([s],[easing],[fn])</h3><p><code>toggle()</code> 方法在被选元素上进行 <code>hide()</code> 和 <code>show()</code> 之间的切换。</p><p>如：在所有 <code></code> 元素上进行隐藏和显示之间的切换：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"p"</span>).toggle();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 <code>show()</code>，如果一个元素是可见的，则运行 <code>hide()</code> - 这会造成一种切换的效果。</p><p>带参数语法：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(selector).toggle(speed,easing,callback)</span><br></pre></td></tr></table></figure><p></p><table><tr><th>参数</th><th>描述</th></tr><tr><td><em>speed</em></td><td>可选。规定隐藏/显示效果的速度。 可能的值：<ul><li>毫秒</li><li>“slow”</li><li>“fast”</li></ul></td></tr><tr><td><em>easing</em></td><td>可选。规定在动画的不同点上元素的速度。默认值为 “swing”。 可能的值：<ul><li>“swing” - 在开头/结尾移动慢，在中间移动快</li><li>“linear” - 匀速移动</li></ul></td></tr><tr><td><em>callback</em></td><td>可选。toggle() 方法执行完之后，要执行的函数。</td></tr></table><p>1秒之内动态隐藏和显示p元素：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"p"</span>).toggle(<span class="number">1000</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>1秒之内动态隐藏和显示p元素，并执行回调函数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"button"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"p"</span>).toggle(<span class="number">1000</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        alert(<span class="string">"toggle() 方法已完成!"</span>);</span><br><span class="line">    &#125;);﻿​</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p><code>toggle(fn1,fn2...fnN)</code>函数也可以用于几个函数间的切换，现有如下代码：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"panel h5.head"</span>).bind(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> $content=$(<span class="keyword">this</span>).next(<span class="string">"div.content"</span>);</span><br><span class="line">        <span class="keyword">if</span>($content.is(<span class="string">":visible"</span>))&#123;</span><br><span class="line">            $content.hide();</span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">            $content.show();</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure><p></p><p>使用<code>toggle</code>改写：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"panel h5.head"</span>).toggle(</span><br><span class="line">    <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        $(<span class="keyword">this</span>).next(<span class="string">"div.content"</span>).show();    </span><br><span class="line">    &#125;,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        $(<span class="keyword">this</span>).next(<span class="string">"div.content"</span>).hide();</span><br><span class="line">    &#125;</span><br><span class="line">);</span><br></pre></td></tr></table></figure><p></p><h2 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h2><h3 id="blur-data-fn"><a href="#blur-data-fn" class="headerlink" title="blur([[data],fn])"></a>blur([[data],fn])</h3><p>当元素失去焦点时触发 <code>blur</code> 事件。</p><p>示例：</p><p>触发所有段落的<code>blur</code>事件：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).blur();</span><br></pre></td></tr></table></figure><p></p><p>任何段落失去焦点时弹出一个 “Hello World!”在每一个匹配元素的blur事件中绑定的处理函数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).blur( <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123; alert(<span class="string">"Hello World!"</span>); &#125; );﻿​</span><br></pre></td></tr></table></figure><p></p><h3 id="change-data-fn"><a href="#change-data-fn" class="headerlink" title="change([[data],fn])"></a>change([[data],fn])</h3><p>当元素的值改变时发生 <code>change</code> 事件（仅适用于表单字段）。</p><p>示例：</p><p>当<code>&lt;input&gt;</code>文本值发生改变，且失去焦点或者按Enter键的时候触发：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"input"</span>).change(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">"文本已被修改"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>注意，在输入过程中，虽然值不断改变，但不会触发<code>change()</code>，除非<code>&lt;input&gt;</code>失去焦点或者按Enter键的时候触发。</p><h3 id="click-data-fn"><a href="#click-data-fn" class="headerlink" title="click([[data],fn])"></a>click([[data],fn])</h3><p>略。</p><h3 id="dblclick-data-fn"><a href="#dblclick-data-fn" class="headerlink" title="dblclick([[data],fn])"></a>dblclick([[data],fn])</h3><p>略。</p><h3 id="error-data-fn"><a href="#error-data-fn" class="headerlink" title="error([[data],fn])"></a>error([[data],fn])</h3><p>当元素遇到错误（没有正确载入）时，发生 error 事件。</p><p>如：图片加载错误时，替换为文本提示：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"img"</span>).error(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"img"</span>).replaceWith(<span class="string">"&lt;p&gt;图片加载错误!&lt;/p&gt;"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="focus-data-fn"><a href="#focus-data-fn" class="headerlink" title="focus([[data],fn])"></a>focus([[data],fn])</h3><p>当元素获得焦点时，触发 focus 事件。可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数。</p><p>示例：</p><p>当页面加载后将 id 为 ‘login’ 的元素设置焦点：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"#login"</span>).focus();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><p>使人无法使用文本框：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"input[type=text]"</span>).focus(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.blur();</span><br><span class="line">&#125;);﻿​</span><br></pre></td></tr></table></figure><p></p><h3 id="focusin-data-fn"><a href="#focusin-data-fn" class="headerlink" title="focusin([data],fn)"></a>focusin([data],fn)</h3><p>当元素（或在其内的任意元素）获得焦点时发生 <code>focusin</code> 事件。</p><p>当在元素或在其内的任意元素上发生 focus 事件时，<code>focusin()</code> 方法添加要运行的函数。与 <code>focus()</code> 方法不同的是，<code>focusin()</code>方法在任意子元素获得焦点时也会触发。</p><p>例如，现有div：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">style</span>=<span class="string">"border: 1px solid black;padding:10px;"</span>&gt;</span></span><br><span class="line">    First name: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span><span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">    Last name: <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>div子元素<code>&lt;input&gt;</code>获得焦点时，改变div的颜色：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"div"</span>).focusin(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="keyword">this</span>).css(<span class="string">"background-color"</span>,<span class="string">"#FFFFCC"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="focusout-data-fn"><a href="#focusout-data-fn" class="headerlink" title="focusout([data],fn)"></a>focusout([data],fn)</h3><p>与<code>foucusin</code>相反。</p><h3 id="keydown-data-fn"><a href="#keydown-data-fn" class="headerlink" title="keydown([[data],fn])"></a>keydown([[data],fn])</h3><p>当键盘或按钮被按下时，发生 <code>keydown</code> 事件。</p><p>例如：在页面内对键盘按键做出回应，可以使用如下代码：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">window</span>).keydown(<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">switch</span>(event.which) &#123;</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">        <span class="comment">// 不同的按键可以做不同的事情</span></span><br><span class="line">        <span class="comment">// 不同的浏览器的keycode不同</span></span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="keypress-data-fn"><a href="#keypress-data-fn" class="headerlink" title="keypress([[data],fn])"></a>keypress([[data],fn])</h3><p><code>keydown</code>：用户在键盘上按下某按键是发生。一直按着某按键则会不断触发（opera浏览器除外）。</p><p><code>keypress</code>：用户按下一个按键，并产生一个字符时发生（也就是不管类似shift、alt、ctrl之类的键，就是说用户按了一个能在屏幕上输出字符的按键keypress事件才会触发）。一直按着某按键则会不断触发。</p><h3 id="keyup-data-fn"><a href="#keyup-data-fn" class="headerlink" title="keyup([[data],fn])"></a>keyup([[data],fn])</h3><p>当按钮被松开时，发生 <code>keyup</code> 事件。</p><h3 id="mousedown-d-fn"><a href="#mousedown-d-fn" class="headerlink" title="mousedown([[d,fn])"></a>mousedown([[d,fn])</h3><p>当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 <code>mousedown</code> 事件。<code>mousedown</code> 与 <code>click</code> 事件不同，<code>mousedown</code> 事件仅需要按键被按下，而不需要松开即可发生。鼠标按键可以为左键右键和滚轮。</p><h3 id="mouseup-data-fn"><a href="#mouseup-data-fn" class="headerlink" title="mouseup([[data],fn])"></a>mouseup([[data],fn])</h3><p>与<code>mousedown()</code>相反。</p><p>例子：</p><p>当鼠标指向<code>&lt;div&gt;</code>并按下鼠标按键时，以及松开时触发事件：</p><p>HTML：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span>在这个 div 元素中按下和释放鼠标按钮。<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>jQuery：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"div"</span>).mouseup(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="keyword">this</span>).after(<span class="string">"释放鼠标按钮。"</span>);</span><br><span class="line">&#125;);</span><br><span class="line">$(<span class="string">"div"</span>).mousedown(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="keyword">this</span>).after(<span class="string">"按下鼠标按钮。"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="mouseenter-data-fn"><a href="#mouseenter-data-fn" class="headerlink" title="mouseenter([[data],fn])"></a>mouseenter([[data],fn])</h3><p>当鼠标指针穿过元素时，会发生 <code>mouseenter</code> 事件。该事件大多数时候会与 <code>mouseleave</code> 事件一起使用。</p><h3 id="mouseleave-data-fn"><a href="#mouseleave-data-fn" class="headerlink" title="mouseleave([[data],fn])"></a>mouseleave([[data],fn])</h3><p>当鼠标指针离开元素时，会发生 <code>mouseleave</code> 事件。该事件大多数时候会与 <code>mouseenter</code> 事件一起使用。</p><p>例子：</p><p>当鼠标指针进入 <code>&lt;p&gt;</code> 元素时，设置背景色为黄色，离开时设置为灰色：</p><p>HTML：</p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;鼠标移动到该段落。&lt;/p&gt;</span><br></pre></td></tr></table></figure><p></p><p>jQuery：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"p"</span>).mouseenter(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"p"</span>).css(<span class="string">"background-color"</span>,<span class="string">"yellow"</span>);</span><br><span class="line">&#125;);</span><br><span class="line">$(<span class="string">"p"</span>).mouseleave(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"p"</span>).css(<span class="string">"background-color"</span>,<span class="string">"lightgray"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="mouseover-d-fn"><a href="#mouseover-d-fn" class="headerlink" title="mouseover([[d],fn])"></a>mouseover([[d],fn])</h3><p>当鼠标指针位于元素上方时，会发生 <code>mouseover</code> 事件。该事件大多数时候会与 <code>mouseout</code> 事件一起使用。</p><p>注释：与 <code>mouseenter</code> 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 <code>mouseover</code> 事件。</p><h3 id="mouseout-data-fn"><a href="#mouseout-data-fn" class="headerlink" title="mouseout([[data],fn])"></a>mouseout([[data],fn])</h3><p>当鼠标指针从元素上移开时，发生 <code>mouseout</code> 事件。</p><h3 id="mousemove-data-fn"><a href="#mousemove-data-fn" class="headerlink" title="mousemove([[data],fn])"></a>mousemove([[data],fn])</h3><p>当鼠标指针在指定的元素中移动时，就会发生 <code>mousemove</code> 事件。</p><p>例子：</p><p>获得鼠标指针在页面中的位置：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).mousemove(<span class="function"><span class="keyword">function</span>(<span class="params">event</span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"span"</span>).text(event.pageX + <span class="string">", "</span> + event.pageY);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="resize-data-fn"><a href="#resize-data-fn" class="headerlink" title="resize([[data],fn])"></a>resize([[data],fn])</h3><p>当调整浏览器窗口的大小时，发生 <code>resize</code> 事件。</p><p>例子：</p><p>HTML：</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span>窗口重置了 <span class="tag">&lt;<span class="name">span</span>&gt;</span>0<span class="tag">&lt;/<span class="name">span</span>&gt;</span> 次大小。<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br></pre></td></tr></table></figure><p></p><p>jQuery：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">window</span>).resize(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"span"</span>).text(x+=<span class="number">1</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="scroll-data-fn"><a href="#scroll-data-fn" class="headerlink" title="scroll([[data],fn])"></a>scroll([[data],fn])</h3><p>当用户滚动指定的元素时，会发生 <code>scroll</code> 事件。</p><p>对元素滚动的次数进行计数：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"div"</span>).scroll(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"span"</span>).text(x+=<span class="number">1</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="select-data-fn"><a href="#select-data-fn" class="headerlink" title="select([[data],fn])"></a>select([[data],fn])</h3><p>当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 <code>select</code> 事件。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"input"</span>).select(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">"文本已选中!"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><h3 id="submit-data-fn"><a href="#submit-data-fn" class="headerlink" title="submit([[data],fn])"></a>submit([[data],fn])</h3><p>当提交表单时，会发生 <code>submit</code> 事件。该事件只适用于表单元素。</p><p>如果你要阻止表单提交:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"form"</span>).submit( <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;);﻿​</span><br></pre></td></tr></table></figure><p></p><h3 id="unload-data-fn"><a href="#unload-data-fn" class="headerlink" title="unload([[data],fn])"></a>unload([[data],fn])</h3><p>当用户离开页面时，会发生 <code>unload</code> 事件。</p><p>当发生以下情况下，会触发 <code>unload</code> 事件：</p><p>1.点击某个离开页面的链接</p><p>2.在地址栏中键入了新的 URL</p><p>3.使用前进或后退按钮</p><p>4.关闭浏览器窗口</p><p>5.重新加载页面</p><p><code>unload()</code> 方法只应用于 <code>window</code> 对象。</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="built_in">window</span>).unload(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(<span class="string">"Goodbye!"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p></p><script>$(".post-body a").not(".thispage").addClass("ignore-href").attr("target","_blank")</script></div><div></div><div><div style="padding:10px 0;margin:20px auto;width:90%;text-align:center;color:#878787"><div>请作者喝瓶肥宅水~</div><button id="rewardButton" style="margin-top:10px" disable="enable" onclick='var e=document.getElementById("QR");"none"===e.style.display?e.style.display="block":e.style.display="none"'><span style="height:46px;width:46px;line-height:46px;border-radius:50%;color:#fe5f55;font-weight:600;background:#ffd5be;border:none;box-shadow:0 4px 8px 0 rgba(255,213,190,.4)">￥</span></button><div id="QR" style="display:none"><div id="wechat" style="display:inline-block"><img id="wechat_qr" src="/img/wechat_pay.png" alt="MrBird WeChat Pay"></div><div id="alipay" style="display:inline-block"><img id="alipay_qr" src="/img/ali_pay.png" alt="MrBird Alipay"></div></div></div><style>#QR img{width:auto;margin:.8em 1em 0 1em}</style></div><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong> MrBird</li><li class="post-copyright-link"><strong>本文链接：</strong> <a href="http://mrbird.cc/jQuery-事件函数.html" title="jQuery 事件函数">http://mrbird.cc/jQuery-事件函数.html</a></li><li class="post-copyright-license"><strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！</li></ul></div><footer class="post-footer"><div class="post-tags" style="margin-bottom:1.3rem"><a href="/tags/jQuery/" rel="tag"># jQuery</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/jQuery-文档处理.html" rel="next" title="jQuery 文档处理"><i class="fa fa-chevron-left"></i> jQuery 文档处理</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"><a href="/Spring-SimpleJdbcTemplate.html" rel="prev" title="Spring SimpleJdbcTemplate">Spring SimpleJdbcTemplate <i class="fa fa-chevron-right"></i></a></div></div></footer></article><hr><div id="container"></div><div class="post-spread"><div id="comment-div"></div><style>.valine .vlist{margin-bottom:3rem}.valine .vwrap .vcontrol .col.col-60{text-align:left}.valine .vlist .vcard .vhead,.valine .vlist .vcard section .vfooter{text-align:left}.valine .vlist .vcard section{padding-bottom:.5rem!important}.vname{color:#42b983!important}.valine .vinfo .col{text-align:left;margin-left:-27rem}div#comment-div{margin-bottom:-8rem}.valine .vlist .vcard .vcontent .code,.valine .vlist .vcard .vcontent code,.valine .vlist .vcard .vcontent pre{background:#fbfbfb}.valine .vlist .vcard .vcontent a{color:#42b983}.valine .vlist .vcard .vimg{border-radius:3px}.valine .vbtn{border-radius:2px;padding:.3rem 1.25rem}.valine .vbtn:active,.valine .vbtn:hover{color:#42b983;border-color:#42b983;background-color:#fff}.valine .vwrap .vheader .vinput:focus{border-bottom-color:#42b983}.valine .vlist .vcard .vcontent.expand:before{background:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(0,0%,100%,.2)));background:linear-gradient(180deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.2))}.valine .vlist .vcard .vcontent.expand:after{content:"点击展开";font-size:.4rem;text-align:right;left:-1rem;background:hsla(0,0%,100%,.2)}.valine .vlist .vcard section .vfooter .vat{color:#b3b3b3}.valine .vlist .vcard section .vfooter .vat:hover{color:#42b983}.vcontent img{margin:0}.valine .info{display:none}</style><script type="text/javascript" src="/js/av.min.js"></script><script type="text/javascript" src="/js/Valine.min.js"></script><script type="text/javascript" src="/js/activate-power-mode.js"></script><script>POWERMODE.colorful=!0,POWERMODE.shake=!1,document.body.addEventListener("input",POWERMODE),new Valine({el:"#comment-div",notify:!1,verify:!0,appId:"SMcDFP1bN1jgb9Lo8JmtICHm-gzGzoHsz",appKey:"dH4nrUrt3V5XiJiI6Qyejnbi",placeholder:"",path:window.location.pathname,avatar:"monsterid",guest_info:["nick","mail","link"]});var chicken='<a href="#"><img src="https://image.uisdc.com/wp-content/uploads/2018/06/uisdc-chat-chicken.gif" class="checken"></a>';$("#comment-div").prepend(chicken)</script></div></div><script>var $bqinline=$("img[alt='bq-inline']");$bqinline.css({width:"2.3rem",height:"2.3rem",display:"inline","vertical-align":"text-bottom"})</script></div><div class="comments" id="comments"></div></div><aside id="sidebar" class="sidebar" onselectstart="return!1"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">Contents</li><li class="sidebar-nav-overview" data-target="site-overview">Site Preview</li></ul><section class="site-overview sidebar-panel"><div class="sidebar-sticky sticky"><div itemscope itemtype="http://schema.org/Person"><div class="author__avatar"><img src="/images/blogImage.jpg" class="author__avatar" alt="MrBird" itemprop="image"></div><div class="author__content"><h3 class="author__name" itemprop="name">MrBird's Blog</h3><p class="author__bio" itemprop="description">A simple blog, code repository, just keep blogging</p></div><div class="author__urls-wrapper"><button class="btn btn--inverse">Follow</button><ul class="author__urls social-icons"><li><a href="http://map.baidu.com/?newmap=1&s=s%26wd%3D%E7%A6%8F%E5%B7%9E%E5%B8%82%26c%3D300&from=alamap&tpl=mapcity" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-map-marker" aria-hidden="true"></i>&nbsp;&nbsp;FuZhou,CN</a></li><li><a href="https://love.mrbird.cc" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-diamond" aria-hidden="true"></i>&nbsp;&nbsp;Love</a></li><li><a href="https://cloud.mrbird.cn" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-chain" aria-hidden="true"></i>&nbsp;&nbsp;FEBS</a></li><li><a href="/atom.xml" target="_blank" itemprop="url" class="ignore-href"><i class="fa fa-fw fa-rss" aria-hidden="true"></i>&nbsp;&nbsp;RSS</a></li><li><a href="https://gitee.com/mrbirdd" target="_blank" itemprop="sameAs" class="ignore-href"><i class="fa fa-fw fa-codepen" aria-hidden="true"></i>&nbsp;&nbsp;Gitee</a></li><li><a href="https://github.com/wuyouzhuguli" target="_blank" itemprop="sameAs" class="ignore-href"><i class="fa fa-fw fa-github-alt" aria-hidden="true"></i>&nbsp;&nbsp;GitHub</a></li><li><a href="javascript:;" class="popup-trigger"><i class="fa fa-fw fa-search" aria-hidden="true"></i>&nbsp;&nbsp;Search</a></li></ul></div></div></div><script>var $urls=$(".author__urls").find("a");$urls.each(function(){var o=$(this);o.mouseenter(function(){o.css({color:"#414547"})}),o.mouseleave(function(){o.css({color:""})})})</script></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#页面载入"><span class="nav-number">1.</span> <span class="nav-text">页面载入</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#ready"><span class="nav-number">1.1.</span> <span class="nav-text">ready()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件处理"><span class="nav-number">2.</span> <span class="nav-text">事件处理</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#on-eve-sel-data-fn"><span class="nav-number">2.1.</span> <span class="nav-text">on(eve,[sel],[data],fn)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#off-eve-sel-fn"><span class="nav-number">2.2.</span> <span class="nav-text">off(eve,[sel],[fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#bind-type-data-fn"><span class="nav-number">2.3.</span> <span class="nav-text">bind(type,[data],fn)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#one-type-data-fn"><span class="nav-number">2.4.</span> <span class="nav-text">one(type,[data],fn)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#trigger-type-data"><span class="nav-number">2.5.</span> <span class="nav-text">trigger(type,[data])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#triggerHandler-type-data"><span class="nav-number">2.6.</span> <span class="nav-text">triggerHandler(type, [data])</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件委派"><span class="nav-number">3.</span> <span class="nav-text">事件委派</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#live-type-data-fn"><span class="nav-number">3.1.</span> <span class="nav-text">live(type, [data], fn)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#delegate-sel-t-d-fn"><span class="nav-number">3.2.</span> <span class="nav-text">delegate(sel,[t],[d],fn)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件切换"><span class="nav-number">4.</span> <span class="nav-text">事件切换</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#hover-over-out"><span class="nav-number">4.1.</span> <span class="nav-text">hover([over,]out)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#toggle-s-easing-fn"><span class="nav-number">4.2.</span> <span class="nav-text">toggle([s],[easing],[fn])</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#事件"><span class="nav-number">5.</span> <span class="nav-text">事件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#blur-data-fn"><span class="nav-number">5.1.</span> <span class="nav-text">blur([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#change-data-fn"><span class="nav-number">5.2.</span> <span class="nav-text">change([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#click-data-fn"><span class="nav-number">5.3.</span> <span class="nav-text">click([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#dblclick-data-fn"><span class="nav-number">5.4.</span> <span class="nav-text">dblclick([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#error-data-fn"><span class="nav-number">5.5.</span> <span class="nav-text">error([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#focus-data-fn"><span class="nav-number">5.6.</span> <span class="nav-text">focus([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#focusin-data-fn"><span class="nav-number">5.7.</span> <span class="nav-text">focusin([data],fn)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#focusout-data-fn"><span class="nav-number">5.8.</span> <span class="nav-text">focusout([data],fn)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#keydown-data-fn"><span class="nav-number">5.9.</span> <span class="nav-text">keydown([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#keypress-data-fn"><span class="nav-number">5.10.</span> <span class="nav-text">keypress([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#keyup-data-fn"><span class="nav-number">5.11.</span> <span class="nav-text">keyup([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#mousedown-d-fn"><span class="nav-number">5.12.</span> <span class="nav-text">mousedown([[d,fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#mouseup-data-fn"><span class="nav-number">5.13.</span> <span class="nav-text">mouseup([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#mouseenter-data-fn"><span class="nav-number">5.14.</span> <span class="nav-text">mouseenter([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#mouseleave-data-fn"><span class="nav-number">5.15.</span> <span class="nav-text">mouseleave([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#mouseover-d-fn"><span class="nav-number">5.16.</span> <span class="nav-text">mouseover([[d],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#mouseout-data-fn"><span class="nav-number">5.17.</span> <span class="nav-text">mouseout([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#mousemove-data-fn"><span class="nav-number">5.18.</span> <span class="nav-text">mousemove([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#resize-data-fn"><span class="nav-number">5.19.</span> <span class="nav-text">resize([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#scroll-data-fn"><span class="nav-number">5.20.</span> <span class="nav-text">scroll([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#select-data-fn"><span class="nav-number">5.21.</span> <span class="nav-text">select([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#submit-data-fn"><span class="nav-number">5.22.</span> <span class="nav-text">submit([[data],fn])</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#unload-data-fn"><span class="nav-number">5.23.</span> <span class="nav-text">unload([[data],fn])</span></a></li></ol></li></ol></div></div></section></div></aside></div></main><footer id="footer" class="footer" onselectstart="return!1"><div class="footer-inner"><div class="copyright">&copy; 2016 - <span itemprop="copyrightYear">2019</span>&nbsp;&nbsp; <span class="author" itemprop="copyrightHolder">MrBird</span>&nbsp;&nbsp;|<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>&nbsp;&nbsp;UV&nbsp;<span class="busuanzi-value" id="busuanzi_value_site_uv" style="cursor:pointer" title="统计开始时间：2019年7月5日"></span> &nbsp;&nbsp;PV&nbsp;<span class="busuanzi-value" id="busuanzi_value_site_pv" style="cursor:pointer" title="统计开始时间：2019年7月5日"></span></div></div></footer><div class="back-to-top"><span style="font-family:'Source Sans Pro','Helvetica Neue',Arial,sans-serif;font-size:1.2em;font-weight:600">TOP</span></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.1.1"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.1"></script><script type="text/javascript">function proceedsearch(){$("body").append('<div class="search-popup-overlay local-search-pop-overlay"></div>').css("overflow","hidden"),$(".search-popup-overlay").click(onPopupClose),$(".popup").toggle();var t=$("#local-search-input");t.attr("autocapitalize","none"),t.attr("autocorrect","off"),t.focus()}var isfetched=!1,isXml=!0,search_path="search.xml";0===search_path.length?search_path="search.xml":search_path.endsWith("json")&&(isXml=!1);var path="/"+search_path,onPopupClose=function(t){$(".popup").hide(),$("#local-search-input").val(""),$(".search-result-list").remove(),$("#no-result").remove(),$(".local-search-pop-overlay").remove(),$("body").css("overflow","")},searchFunc=function(t,e,o){"use strict";$("body").append('<div class="search-popup-overlay local-search-pop-overlay"><div id="search-loading-icon"><i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i></div></div>').css("overflow","hidden"),$("#search-loading-icon").css("margin","20% auto 0 auto").css("text-align","center"),$.ajax({url:t,dataType:isXml?"xml":"json",async:!0,success:function(t){isfetched=!0,$(".popup").detach().appendTo(".header-inner");var n=isXml?$("entry",t).map(function(){return{title:$("title",this).text(),content:$("content",this).text(),url:$("url",this).text()}}).get():t,r=document.getElementById(e),s=document.getElementById(o),a=function(){var t=r.value.trim().toLowerCase(),e=t.split(/[\s\-]+/);e.length>1&&e.push(t);var o=[];if(t.length>0&&n.forEach(function(n){function r(e,o,n,r){for(var s=r[r.length-1],a=s.position,i=s.word,l=[],h=0;a+i.length<=n&&0!=r.length;){i===t&&h++,l.push({position:a,length:i.length});var p=a+i.length;for(r.pop();0!=r.length&&(s=r[r.length-1],a=s.position,i=s.word,p>a);)r.pop()}return c+=h,{hits:l,start:o,end:n,searchTextCount:h}}function s(t,e){var o="",n=e.start;return e.hits.forEach(function(e){o+=t.substring(n,e.position);var r=e.position+e.length;o+='<b class="search-keyword">'+t.substring(e.position,r)+"</b>",n=r}),o+=t.substring(n,e.end)}var a=!1,i=0,c=0,l=n.title.trim(),h=l.toLowerCase(),p=n.content.trim().replace(/<[^>]+>/g,""),u=p.toLowerCase(),f=decodeURIComponent(n.url),d=[],g=[];if(""!=l&&(e.forEach(function(t){function e(t,e,o){var n=t.length;if(0===n)return[];var r=0,s=[],a=[];for(o||(e=e.toLowerCase(),t=t.toLowerCase());(s=e.indexOf(t,r))>-1;)a.push({position:s,word:t}),r=s+n;return a}d=d.concat(e(t,h,!1)),g=g.concat(e(t,u,!1))}),(d.length>0||g.length>0)&&(a=!0,i=d.length+g.length)),a){[d,g].forEach(function(t){t.sort(function(t,e){return e.position!==t.position?e.position-t.position:t.word.length-e.word.length})});var v=[];0!=d.length&&v.push(r(l,0,l.length,d));for(var C=[];0!=g.length;){var $=g[g.length-1],m=$.position,x=$.word,w=m-20,y=m+80;w<0&&(w=0),y<m+x.length&&(y=m+x.length),y>p.length&&(y=p.length),C.push(r(p,w,y,g))}C.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hits.length!==e.hits.length?e.hits.length-t.hits.length:t.start-e.start});var T=parseInt("1");T>=0&&(C=C.slice(0,T));var b="";b+=0!=v.length?"<li><a href='"+f+"' class='search-result-title'>"+s(l,v[0])+"</a>":"<li><a href='"+f+"' class='search-result-title'>"+l+"</a>",C.forEach(function(t){b+="<a href='"+f+'\'><p class="search-result">'+s(p,t)+"...</p></a>"}),b+="</li>",o.push({item:b,searchTextCount:c,hitCount:i,id:o.length})}}),1===e.length&&""===e[0])s.innerHTML='<div id="no-result"><i class="fa fa-search fa-5x" /></div>';else if(0===o.length)s.innerHTML='<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>';else{o.sort(function(t,e){return t.searchTextCount!==e.searchTextCount?e.searchTextCount-t.searchTextCount:t.hitCount!==e.hitCount?e.hitCount-t.hitCount:e.id-t.id});var a='<ul class="search-result-list">';o.forEach(function(t){a+=t.item}),a+="</ul>",s.innerHTML=a}};r.addEventListener("input",a),$(".local-search-pop-overlay").remove(),$("body").css("overflow",""),proceedsearch()}})};$(".popup-trigger").click(function(t){t.stopPropagation(),isfetched===!1?searchFunc(path,"local-search-input","local-search-result"):proceedsearch()}),$(".popup-btn-close").click(onPopupClose),$(".popup").click(function(t){t.stopPropagation()}),$(document).on("keyup",function(t){var e=27===t.which&&$(".search-popup").is(":visible");e&&onPopupClose()})</script></body><script>$(function(){$("a").not(".nav-link,.cloud-tie-join-count,.ignore-href,.jstree-anchor").addClass("animsition-link")});var burst1=new mojs.Burst({left:0,top:0,radius:{5:40},children:{shape:"circle",fill:["red","cyan","orange"],fillOpacity:.8,radiusX:3.5,radiusY:3.5}});document.addEventListener("click",function(a){null==a.target.href&&"footer"!=a.target.className&&"copyright"!=a.target.className&&"author__urls social-icons"!=a.target.className&&"author__avatar"!=a.target.className&&"sidebar sidebar-active"!=a.target.className&&burst1.tune({x:a.pageX,y:a.pageY}).generate().replay()})</script><script type="text/javascript" src="/js/message.js"></script></html><!-- rebuild by neat -->